<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Account</title>
    <link rel="stylesheet" th:href="@{/css/custom-style.css}">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.min.css}">
    <script th:src="@{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.1.3/js/bootstrap.min.js}"></script>
</head>
<body>

<div th:replace="templates::topbar(currentPage='userInfo')"></div>


<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="card shadow-sm">
                <div class="card-body text-center">

                    <img id="userIconImg"
                         class="user-big rounded-circle"
                         th:src="${user.userIcon}==null?@{/img/defaultIcon.png}:@{${user.userIcon}}"
                         src="/img/defaultIcon.png" alt="">
                    <div class="mt-2">
                        <div class="badge badge-dark">userId</div>
                        <span th:text="${user.userId}">1</span>
                    </div>

                </div>
                <div class="card-body">
                    <div>
                        <label>userName:</label>
                        <input id="userNameInput" class="form-control" type="text" th:value="${user.userName}"
                               value="Dove" disabled>
                    </div>
                    <div>
                        <label>gender:</label>
                        <select id="genderSelect" class="form-control" disabled>
                            <option value="0" th:selected="${user.gender==0}" selected>Secrecy</option>
                            <option value="1" th:selected="${user.gender==1}">Male</option>
                            <option value="2" th:selected="${user.gender==2}">Female</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h3 class="d-inline-flex">Videos</h3>
                    <hr>
                    <div id="videoCards">

                    </div>

                </div>
                <div class="card-body text-center">
                    <div id="videoNav">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    var currentPage = 1;

    function gotoPage(pn) {
        $.ajax({
            url: "/videos/" + [[${user.userId}]],
            data: "pn=" + pn,
            type: "GET",
            success: function (result) {
                currentPage = pn;
                buildCards(result);
                buildVideoNav(result);
            }
        });
    }

    function buildCards(result) {
        var count = 0;
        var videos = result.extras.pageInfo.list;
        var user = result.extras.user;
        var videoCards = $('#videoCards');
        videoCards.empty();
        var rowDiv = $('<div></div>').addClass('row').addClass('mb-2');
        $.each(videos, function (index, item) {
            count++;
            var cardDiv = "    <div class=\"col-sm-4\">\n" +
                "        <div class=\"card shadow\">\n" +
                "            <div class=\"card-body text-center\">\n" +
                "                <a href=\"/vid/" + item.videoId + "\">\n" +
                "                    <div>\n" +
                "                        <img src=" + (item.cover === null ? "/img/defaultVideoCover.png" : item.cover) + " class=\"video-cover\">\n" +
                "                        <p class=\"mt-2 font-weight-bold card-text\" style=\"font-size: 14px\">" +
                item.videoName +
                "                    </div>\n" +
                "                </a>\n" +
                "                <hr>\n" +
                "                <a href=\"/uid/" + user.userId + "\">\n" +
                "                    <div class=\"text-right mr-2\">\n" +
                "                        <div class=\"d-inline-block\" style=\"font-size: 12px\">\n" +
                "                            <span>" + user.userName + "</span>\n" +
                "                            <p>" + item.uploadTime.slice(0, 10) + "</p>\n" +
                "                        </div>\n" +
                "                        <img src=" + user.userIcon  +
                "                             class=\"user-small rounded-circle img-fluid\"\n" +
                "                             style=\"vertical-align: baseline\">\n" +
                "                    </div>\n" +
                "                </a>\n" +
                "            </div>\n" +
                "        </div>\n" +
                "    </div>\n";

            rowDiv.append(cardDiv);
            if (count === 3) {
                count = 0;
                rowDiv.appendTo(videoCards);
                rowDiv = $('<div></div>').addClass('row').addClass('mb-2');
            }
        });
        if (count !== 0) {
            rowDiv.appendTo(videoCards);
        }

    }

    function buildVideoNav(result) {
        $("#videoNav").empty();
        var pageInfo = result.extras.pageInfo;
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPageLi = $("<li></li>").addClass('page-item').append($("<a></a>").addClass('page-link')
            .append("Index").attr("href", "#"));
        var prePageLi = $("<li></li>").addClass('page-item').append($("<a></a>").addClass('page-link')
            .append($("<span></san>").attr("aria-hidden", "true")
                .append("&laquo;")).attr("href", "#"));
        if (!pageInfo.hasPreviousPage) {
            prePageLi.addClass("disabled");
            firstPageLi.addClass("disabled");
        } else {
            firstPageLi.click(function () {
                gotoPage(1);
            });
            prePageLi.click(function () {
                gotoPage(pageInfo.pageNum - 1);
            });
        }
        var nextPageLi = $("<li></li>").addClass('page-item').append($("<a></a>").addClass('page-link')
            .append($("<span></san>").attr("aria-hidden", "true")
                .append("&raquo;")).attr("href", "#"));
        var lastPageLi = $("<li></li>").addClass('page-item').append($("<a></a>").addClass('page-link')
            .append("Last").attr("href", "#"));
        if (!pageInfo.hasNextPage) {
            nextPageLi.addClass("disabled");
            lastPageLi.addClass("disabled");
        } else {
            nextPageLi.click(function () {
                gotoPage(pageInfo.pageNum + 1);
            });
            lastPageLi.click(function () {
                gotoPage(pageInfo.pages);
            });
        }
        ul.addClass('justify-content-center').append(firstPageLi).append(prePageLi);
        $.each(pageInfo.navigatepageNums, function (index, item) {
            var numLi = $("<li></li>").addClass('page-item').append($("<a></a>").addClass('page-link')
                .append(item).attr("href", "#"));
            if (pageInfo.pageNum == item) {
                numLi.addClass("active");
            }
            numLi.click(function () {
                gotoPage(item);
            });
            ul.append(numLi);
        });
        ul.append(nextPageLi).append(lastPageLi);
        var nav = $("<nav></nav>")
            .attr("aria-label", "Page navigation").append(ul);
        nav.appendTo("#videoNav");
    }

    $(function () {
        gotoPage(1);
    });


</script>

</body>
</html>